
import React, { useEffect, useState } from 'react';
import { List, Avatar, Divider, Form, Input, Button, Upload, message } from 'antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import './index.css';
import { comments } from '../../../apis/comment';

const EvaluatePage = ({ reviews }) => {
  const [commentsData, setCommentsData] = useState([]);
  const [newComment, setNewComment] = useState('');
  const [fileList, setFileList] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const data = await comments();
      setCommentsData(data);
    };
    fetchData();
  }, []);

  const beforeUpload = (file) => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
      message.error('只能上传 JPG/PNG 格式的图片!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('图片大小必须小于 2MB!');
    }
    return isJpgOrPng && isLt2M;
  };

  const handleImageChange = ({ fileList }) => {
    setFileList(fileList);
  };

  const handleCommentSubmit = () => {
    if (newComment.trim() === '') {
      return;
    }

    const newCommentItem = {
      author: '当前用户',
      content: newComment,
      avatar: 'https://example.com/avatar.jpg',
      datetime: new Date().toLocaleString(),
      images: fileList.map((file) => file.thumbUrl)
    };

    setCommentsData([...commentsData, newCommentItem]);
    setNewComment('');
    setFileList([]);
  };

  const uploadButton = (
    <div>
      {fileList.length === 0 ? (
        <PlusOutlined />
      ) : (
        <LoadingOutlined />
      )}
      <div style={{ marginTop: 8 }}>上传图片</div>
    </div>
  );

  return (
    <div className="box">
      <h1>商品评价</h1>
      <Divider />
      <List
        itemLayout="horizontal"
        dataSource={commentsData}
        renderItem={(review) => (
          <List.Item>
            <List.Item.Meta
              avatar={<Avatar src={review.avatar} alt={review.author} />}
              title={<a href="/">{review.author}</a>}
              description={
                <div>
                  <p>{review.content}</p>
                  <div className="image-list">
                    {review.images.map((image) => (
                      <img src={image} alt={review.author} key={image} />
                    ))}
                  </div>
                  <span>{review.datetime}</span>
                </div>
              }
            />
          </List.Item>
        )}
      />
      <Form layout="vertical" onFinish={handleCommentSubmit}>
        <Form.Item name="comment">
          <Input.TextArea
            placeholder="请输入您的评论"
            autoSize={{ minRows: 3, maxRows: 6 }}
            value={newComment}
            onChange={(e) => setNewComment(e.target.value)}
          />
        </Form.Item>
        <Form.Item name="images">
          <Upload
            listType="picture-card"
            fileList={fileList}
            beforeUpload={beforeUpload}
            onChange={handleImageChange}
          >
            {fileList.length >= 3 ? null : uploadButton}
          </Upload>
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            提交评论
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default EvaluatePage;
